document.addEventListener('DOMContentLoaded', function() {
    const updatePreviewBtn = document.getElementById('update-preview');
    const downloadImageBtn = document.getElementById('download-image');
    
    // 更新预览
    updatePreviewBtn.addEventListener('click', function() {
        // 更新标题
        const titleText = document.getElementById('edit-title').value;
        document.getElementById('main-title').textContent = titleText;
        
        // 更新问题内容
        for (let i = 1; i <= 4; i++) {
            const qaContent = document.getElementById(`edit-qa-${i}`).value;
            const qaLines = qaContent.split('\n');
            
            let formattedContent = '';
            if (qaLines.length > 0) {
                formattedContent = `<strong>${qaLines[0]}</strong><br>`;
                for (let j = 1; j < qaLines.length; j++) {
                    formattedContent += qaLines[j];
                    if (j < qaLines.length - 1) {
                        formattedContent += '<br>';
                    }
                }
            }
            
            document.getElementById(`qa-${i}`).innerHTML = formattedContent;
        }
        
        // 更新水印文字
        const watermarkText = document.getElementById('watermark-text').value;
        const watermarkElements = document.querySelectorAll('.watermark-text');
        watermarkElements.forEach(element => {
            element.textContent = watermarkText;
        });
        
        // 更新颜色
        const qaCard = document.querySelector('.qa-card');
        const titleElement = document.getElementById('main-title');
        const titleUnderline = document.querySelector('.title-underline');
        const qaItems = document.querySelectorAll('.qa-item');
        const qaNumbers = document.querySelectorAll('.qa-number');
        
        // 背景颜色
        const bgColor = document.getElementById('background-color').value;
        qaCard.style.backgroundColor = bgColor;
        
        // 标题颜色
        const titleColor = document.getElementById('title-color').value;
        titleElement.style.color = titleColor;
        
        // 下划线颜色
        const underlineColor = document.getElementById('underline-color').value;
        titleUnderline.style.backgroundColor = underlineColor;
        
        // 问题背景色
        const qaBgColor = document.getElementById('qa-bg-color').value;
        qaItems.forEach(item => {
            item.style.backgroundColor = qaBgColor;
        });
        
        // 数字背景色
        const numberBgColor = document.getElementById('number-bg-color').value;
        qaNumbers.forEach(number => {
            number.style.backgroundColor = numberBgColor;
        });
    });
    
    // 下载图片
    downloadImageBtn.addEventListener('click', function() {
        const qaCard = document.querySelector('.qa-card');
        
        // 使用修改后的高度500px
        html2canvas(qaCard, {
            backgroundColor: qaCard.style.backgroundColor || '#f9f2e6',
            scale: 2, // 提高图片质量
            logging: false,
            width: 360,
            height: 500
        }).then(canvas => {
            // 创建下载链接
            const link = document.createElement('a');
            link.download = '问题解答.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        });
    });
    
    // 初始化时更新一次预览
    updatePreviewBtn.click();
});